import React, { useRef,useImperativeHandle } from 'react';
function Child(props,childRef){
  const inputRef = useRef();
  //通过此hook可以自定义暴露给父组件ref值
  //childRef.current = {focus(){}}
  useImperativeHandle(childRef,()=>{
    return {
      focus(){
        inputRef.current.focus();
      }
    }
  });
  return <input ref={inputRef}/>
}
const ForwardChild = React.forwardRef(Child);

function Parent(){
  //在父组件里定一个ref
  const childRef = useRef();
  //通过ref属性传递给了Child子组件
  //因为Child是 一个函数组件，函数组件不能直接设置ref属性
  //只能把Child子组件传递React.forwardRef,返回一个转发Child组件，这个转发Child组件就可以接收ref属性
  //Child组件就有2个参数，1个参数是属性对象 2个参数就转发过来的ref
  return (
    <div>
      <ForwardChild ref={childRef}/>
      <button onClick={()=>{
        childRef.current.focus();
        //childRef.current.remove();
      }}>focus</button>
    </div>
  )
}
export default Parent;
